<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择模板:</p>
			</el-col>
			<el-col :span="6">
				<el-select size="small" v-model="upData.schemeId" clearable placeholder="请选择上传模板" @change="tempChange">
					<el-option v-for="item in templateCombo" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="5" style="padding-left: 2px">
				<div v-if="upData.schemeId != '' " style="clear: both;float: left">
					<el-upload :action="action" :data="upData" accept=".xlsx" name="upExecl" :on-progress="process" :on-error="error" :on-success="success" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="数据导入中，请稍后！">
						<el-button size="small" type="primary">点击上传</el-button>
						&nbsp;&nbsp;&nbsp;<span slot="tip" style="color: red;font-size: 15px;">只能上传.xlsx文件</span>
					</el-upload>
				</div>
			</el-col>
			<el-col :span="12" style="text-align: right;margin-left: -10px;">
				<el-button type="primary" size="small" @click="saveCar">批量确认</el-button>
				<el-button type="primary" size="small" @click="saveAll">全部确认</el-button>
				<el-button size="small" type="primary" @click="delCheck">批量删除</el-button>
				<el-button size="small" type="primary" @click="delAll">全部删除</el-button>
				<el-button size="small" type="primary" @click="download">下载模板</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" label="选择" fixed></el-table-column>
					<!--<el-table-column type="index" width="70" label="序号" >
					</el-table-column>-->
					<el-table-column prop="vin" label="车架号">
					</el-table-column>
					<el-table-column prop="uName" label="SA姓名">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				//等待框
				fullscreenLoading: false,
				action: this.API_ROOT + "/base/execl/upload",
				upData: {
					schemeId: '',
					uid: window.localStorage.getItem("uid"),
					token: window.localStorage.getItem("token")
				},
				//下拉列表数据
				templateCombo: [],
				//列表数据
				tableData: {
					total: 0,
					dataList: []
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				// 存储 复选框 内容 
				carSelect: [],
				mubanData: {
					excelName: "",
					dataEntityId: "",
					excelPath: "",
					brand: "",
				},
			}
		},
		methods: {
			//chaxun xiazai xinxi 
			downloadQuery: function() {
				//获取上传模板信息
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/download/info',
					params: {
						schemeId: this.$data.upData.schemeId
					}

				}).then(function(resp) {
					debugger;

					this.$data.mubanData = resp.data.data;
					return true;
				}, function(error) {
					// error
				})
			},
			//下载模板
			download: function() {
				debugger;
				if(this.$data.upData.schemeId == ""){
					this.$message.error("请先选择模板");
				}else{
					//获取上传模板信息
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/download/info',
					params: {
						schemeId: this.$data.upData.schemeId
					}

				}).then(function(resp) {
					debugger;
					this.$data.mubanData = resp.data.data;
					if(resp.data.success == false) {
						this.$message.error("请先上传模板");
					} else {
						window.location.href = this.API_ROOT + "/base/exp/download/xlsx?fileId=" + this.$data.mubanData.dataEntityId + "&&fileName=" + this.$data.mubanData.excelName + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
					}
				}, function(error) {
					// error
				})
				}
				

			},
			//每当 复选框发生变化 调用函数 进行更新 赋值
			handleSelectionChange: function(val) {
				this.$data.carSelect = val;
			},
			/*--------------------------导入需要的方法-------------------------------*/
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.impQuery();
			},
			/*--------------------------导入需要的方法-------------------------------*/
			process: function() {
				this.$data.fullscreenLoading = true;
				//				this.$data.loadingVue = this.$loading({
				//					fullscreen: true,
				//					text: "正在导入数据，请稍候"
				//				});
			},
			error: function(err, response) {
				this.$message.error(response.data.msg);
				this.$data.fullscreenLoading = false;
			},
			success: function(response) {
				this.$data.fullscreenLoading = false;

				if(response.success) {
					this.impQuery();
					this.$message(response.msg);

					if(response.fileId != '') {
						this.$confirm('导入数据中有错误数据，是否下载错误数据?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + response.fileId + "&&fileName=车辆明细导入错误数据" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消下载'
							});
						});

					}
				} else {
					this.$message.error(response.msg);
				}

			},
			//查询
			impQuery: function() {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/config/vin/impPage',
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(function(resp) {
					//success
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
			//批量确认
			saveCar: function() {
				debugger
				if(this.$data.carSelect.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/crm/config/vin/impConfirms', this.$data.carSelect, {})
						.then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.impQuery(); //页面刷新
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {
							//异常函数的回调
						})
				}
			},
			//批量删除
			delCheck: function() {
				debugger
				if(this.$data.carSelect.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/crm/config/vin/impDels', this.$data.carSelect, {})
						.then(resp => {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								this.impQuery(); //页面刷新
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {
							//异常函数的回调
						})
				}
			},
			//全部保存
			saveAll: function() {
				this.$confirm('确认要全部倒入这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//等待动画
					this.$data.loadingVue = this.$loading({
						text: "正在确认数据，请稍候"
					});

					this.$http.get(this.API_ROOT + '/crm/config/vin/impConfirmAll', {
						params: {}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();

						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			//全部删除
			delAll: function() {
				this.$confirm('确认要全部删除这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//等待动画
					this.$data.loadingVue = this.$loading({
						text: "正在删除数据，请稍候"
					});

					this.$http.get(this.API_ROOT + '/crm/config/vin/impDelAll', {
						params: {}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();

						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			tempChange: function(newValue) {
				debugger;
				window.localStorage.setItem("itemTemplate", newValue);
			},
			//查询方案下拉列表数据
			queryTemplateCombo: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/combo',

				}).then(function(resp) {

					this.$data.templateCombo = resp.data;
				}, function(error) {
					// error
				})
			},
		},
		created: function() {
			this.impQuery();
			this.queryTemplateCombo();
			var temp = window.localStorage.getItem("itemTemplate");
			if(temp && temp != null && temp.length > 10) {
				this.$data.upData.schemeId = temp;
			}
		}
	}
</script>

<style>

</style>